<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div>
    <p>头像:<img src="/upload/${user.headPic}" style="width: 100px;height: 100px;border-radius:100px "></p>
    <p>账号:${user.name}</p>
    <p>性别:${user.sex==1?"男":"女"}</p>
    <p>状态:${user.status==1?"启用":user.status==2?"禁用":"冻结"}</p>
</div>
<h3>用户管理界面</h3>
<%--展示数据--%>
<button>新增</button>
<button>批量删除</button>
<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <th><input type="checkbox" onclick="checkAll()" id="all">全选</th>
        <th>编号</th>
        <th>账号</th>
        <th>密码</th>
        <th>头像</th>
        <th>性别</th>
        <th>状态</th>
        <th>时间</th>
        <th>操作</th>
    </tr>
    <c:forEach var="u" items="${p.list}">
        <tr>
            <td><input type="checkbox" name="ck" value="${u.id}"></td>
            <td>${u.id}</td>
            <td><a href="#">${u.name}</a></td>
            <td>${u.password}</td>
            <td>${u.sex}</td>
            <td>${u.status}</td>
            <td>${u.time}</td>
            <td><img src="/upload/${u.headPic}" style="width: 100px;height: 100px;border-radius:100px "></td>
            <td><a onclick="return confirm('是否删除?')"
                   href="#">删除</a>
                <a href="/down?filename=${u.headPic}">下载</a>
            </td>
        </tr>
    </c:forEach>
</table>
<div>
    [当前页数:${p.pageNum}总页数:${p.totalPage}]
    <select onchange="changes(this)">
        <c:forEach var="i" begin="2" end="16" step="2" >
        <option <c:if test="${p.pageSize==i}">selected</c:if> >${i}</option>
        </c:forEach>
    </select>
    <c:if test="${p.pageNum>1}">
        <a href="/show?pageNum=1">首页</a>
        <a href="/show?pageNum=${p.pageNum-1}">上一页</a>
    </c:if>
    <c:if test="${p.pageNum<=1}">
        首页 上一页
    </c:if>
    <c:forEach var="i" begin="1" end="${p.totalPage}">
        <a class="page" href="/show?pageNum=${i}">${i}</a>
<%--        <c:if test="${i!=p.pageNum}">--%>
<%--            <a class="page" href="/show?pageNum=${i}">${i}</a>--%>
<%--        </c:if>--%>
<%--        <c:if test="${i==p.pageNum}">--%>
<%--            <a class="page bg" href="/show?pageNum=${i}">${i}</a>--%>
<%--        </c:if>--%>
    </c:forEach>
    <c:if test="${p.pageNum<p.totalPage}">
        <a href="/show?pageNum=${p.pageNum+1}">下一页</a>
        <a href="/show?pageNum=${p.totalPage}">尾页</a>
    </c:if>
    <c:if test="${p.pageNum>=p.totalPage}">
        下一页 尾页
    </c:if>
    <input id="page" type="text" size="1">页
    <button onclick="cli()">跳转</button>
    <%-- 等价于java中的增强for       <c:forEach var="" items=""></c:forEach>
         等价于java中的标准for
         <c:forEach var="" begin="开始" end = "结束"></c:forEach>--%>
    <%--        <c:forEach var="i" begin="1" end="${p.totalPage}">--%>
    <%--            <a href="">${i}</a>--%>
    <%--        </c:forEach>--%>
</div>
</body>
</html>
<script>
    function cli(){
        let num = document.querySelector("#page").value;
        //isNaN()用于判断内容是否是非数字(字母或者符号)
        if (isNaN(num)) num=1;
        else if (num<1) num=1;
        else if (num>${p.totalPage})num=${p.totalPage};
        location.href="/show?pageNum="+num;
    }
    function changes(a){
        location.href="/show?pageSize="+a.value;
    }
</script>
